<template>
    <div>
        <!-- 查询表单 -->
        <div style="padding: 20px;">
            <a-form :form="searchForm" layout="inline">
                <!-- 查询表单项 -->
                <a-form-item label="名称">
                    <a-input v-model="searchParams.fieldName" />
                </a-form-item>
                <a-form-item>
                    <a-button type="primary" @click="searchFruit">查询</a-button>
                </a-form-item>
            </a-form>
        </div>
        <div style="text-align: right; margin: 10px;">
          <a-button type="primary" @click="showModal('add')">新增</a-button>&nbsp;&nbsp;
        </div>

        <!-- 列表展示 -->
        <a-table :columns="columns" :dataSource="dataSource" :loading="loading" :rowKey="record => record.id" :pagination="false">
            <template slot="action" slot-scope="text, record">
                <a-button @click="edit(record)">编辑</a-button>
                &nbsp;&nbsp;
                <a-popconfirm
                    title="是否确认删除此条数据?"
                    ok-text="是"
                    cancel-text="否"
                    @confirm="remove(record)"
                >
                    <a-button type="danger">删除</a-button>
                </a-popconfirm>
            </template>
        </a-table>
        <br/>
        <!-- 分页器 -->
        <a-pagination :show-total="total => `共${total}条`" :total="total" :current="pagination.current" :pageSize="pagination.pageSize" @change="handlePaginationChange" />

        <!-- 新增/编辑对话框 -->
        <a-modal :width="800" v-model:visible="modal.visible" :title="modal.title" @ok="handleOk" @cancel="handleCancel">
            <!-- 表单项 -->
            <a-form :form="modalForm" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }" >
              <a-form-item label="字段名" name="fieldName">
                <a-input v-model="modal.formData.fieldName" />
              </a-form-item>

              <a-form-item label="字段类型" name="fieldType">
                <a-select v-model="modal.formData.fieldType">
                  <a-select-option v-for="type in fieldTypeOptions" :key="type" :value="type">
                    {{ type }}
                  </a-select-option>
                </a-select>
              </a-form-item>

              <a-form-item label="字段长度" name="fieldLength">
                <a-input-number v-model="modal.formData.fieldLength" :min="1" :max="9999" />
              </a-form-item>

              <a-form-item label="默认值" name="defaultValue">
                <a-input v-model="modal.formData.defaultValue" />
              </a-form-item>

              <a-form-item label="字段描述" name="fieldDesc">
                <a-input v-model="modal.formData.fieldDesc" />
              </a-form-item>

              <a-form-item label="字段精度" name="fieldPrecision">
                <a-input-number v-model="modal.formData.fieldPrecision" :min="0" :max="100" />
              </a-form-item>

              <a-form-item label="是否主键" name="isPrimaryKey">
                <a-switch v-model="modal.formData.isPrimaryKey" checked-text="是" un-checked-text="否" />
              </a-form-item>

              <a-form-item label="是否可为空" name="isNullable">
                <a-switch v-model="modal.formData.isNullable" checked-text="是" un-checked-text="否" />
              </a-form-item>
            </a-form>
        </a-modal>

    </div>
</template>

<script>
import {httpAction} from "@api/esManage";

export default {
    props: {
        tableId: {
            type: String
        }
    },
    created() {
        this.fetchData();
    },
    data() {
        return { // 预定义常见的字段类型选项
            fieldTypeOptions: [
              'VARCHAR', 'INT', 'BIGINT', 'DECIMAL', 'DATE',
              'DATETIME', 'TIMESTAMP', 'TEXT', 'BOOLEAN', 'JSON'
            ],
            searchForm: null,
            searchParams: {
                tableId: this.tableId
            },
            dataSource: [],
            columns: [
              {
                title: '序号',
                dataIndex: 'key',
                key: 'key',
                align: 'center',
                customRender: (text, record, index) => `${index + 1}`//此处为重点
              },
              {
                title: '字段名',
                dataIndex: 'fieldName',
                key: 'fieldName'
              },
              {
                title: '字段类型',
                dataIndex: 'fieldType',
                key: 'fieldType'
              },
              {
                title: '字段描述',
                dataIndex: 'fieldDesc',
                key: 'fieldDesc'
              },
              {
                title: '字段精度',
                dataIndex: 'fieldPrecision',
                key: 'fieldPrecision'
              },
              {
                title: '是否主键',
                dataIndex: 'isPrimaryKey',
                key: 'isPrimaryKey',
                customRender: (text) => <span>{text ? '是' : '否'}</span>
              },
              {
                title: '是否可为空',
                dataIndex: 'isNullable',
                key: 'isNullable',
                customRender: (text) => <span>{text ? '是' : '否'}</span>
              },
              {
                title: '字段长度',
                dataIndex: 'fieldLength',
                key: 'fieldLength'
              },
              {
                title: '默认值',
                dataIndex: 'defaultValue',
                key: 'defaultValue'
              },
                {
                    title: '操作',
                    dataIndex: 'action',
                    scopedSlots: { customRender: 'action' }
                }
            ],
            loading: false,
            total: 0,
            pagination: {
                current: 1,
                pageSize: 10
            },
            modalForm: {},
            modal: {
                visible: false,
                title: '',
                record: null,
                formData: {
                }
            },
        };
    },
    methods: {
        searchFruit() {
            this.pagination.current = 1;
            this.fetchData();
        },
        fetchData() {
            this.loading = true;
            let url = "/dsTableField/manage/pageList";
            let that = this;
            let obj = {
                ...this.searchParams,
                pageNo: this.pagination.current,
                pageSize: this.pagination.pageSize
            }
            httpAction(url, obj).then(res => {
                if (res.data.success) {
                    that.dataSource = res.data.result.records;
                    that.total = parseInt(res.data.result.total);
                    this.loading = false;
                }
            }).catch(err => {
                console.log(err)
                this.loading = false;
            })
        },
        handlePaginationChange(page, pageSize) {
            this.pagination.current = page;
            this.pagination.pageSize = pageSize;
            this.fetchData();
        },
        edit(record) {
            this.showModal('edit', record);
        },
        showModal(type, record) {
            this.modal.type = type;
            this.modal.title = type === 'add' ? '新增' : '编辑';
            if(type != 'add'){
              this.modal.formData = record
            }else{
                this.modal.modalForm = {};
            }
            this.modal.visible = true;
        },
        async handleOk() {
            let url = "/dsTableField/manage/saveOrUpdate";
            let that = this;
            this.modal.formData.tableId = this.tableId;
            httpAction(url, this.modal.formData).then(res => {
                if (res.data.success) {
                    that.$message.success('操作成功');
                    this.modal.visible = false;
                    this.searchFruit();
                }
            }).catch(err => {
                console.log(err)
            })
        },
        handleCancel() {
            this.modal.visible = false;
        },
        remove(record) {
            try {
                let url = "/dsTableField/manage/delete";
                let that = this;
                httpAction(url, record).then(res => {
                    if (res.data.success) {
                        that.$message.success('操作成功');
                        this.searchFruit();
                    }
                }).catch(err => {
                    console.log(err)
                })
            } catch (error) {
                console.error('Error deleting record:', error);
            }
        },
        onChange(date, dateString) {
            this.modal.modal.formData.pubTime = dateString;
        },
    }
};
</script>

<style scoped>
/* 样式 */
</style>
